<template>
  <div class="loginbody">
    <div class="login-page">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
         <p class="footer" id="hitokoto_text"></p>
          <span class="login-title">🔐农产品溯源系统</span>
        </div>
        <div class="login-form">
          <el-form :model="form" ref="loginForm">
            <el-form-item prop="userName">
              <el-input type="text" v-model="form.uname" auto-complete="off" placeholder="请输入用户名">
                <template slot="prepend"><i style="font-size:20px" class="el-icon-user"></i></template>
              </el-input>
            </el-form-item>
            <el-form-item prop="passWord">
              <el-input type="text" v-model="form.password" auto-complete="off" placeholder="请输入密码" show-password>
                <template slot="prepend"><i style="font-size:20px" class="el-icon-key"></i></template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <div class="button-row"> <!-- 添加一个容器来包裹按钮 -->
                <el-button style="width:49%;" type="primary" @click="login">登录</el-button>
                <el-button style="width:49%;" @click="register">注册</el-button>
              </div>
            </el-form-item>
            <el-form-item>
              <a href="http://localhost:8080/agreement">阅读并接受 《服务条款》和 《隐私政策》</a>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>

    <el-dialog title="用户注册" :visible.sync="dialogFormVisible">
      <el-form :model="userForm">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="userForm.uname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="userForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input v-model="userForm.tel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="userForm.email" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="goRegister">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import {setToken} from "@/api/config";
fetch('https://v1.hitokoto.cn')
    .then(response => response.json())
    .then(data => {
      const hitokoto = document.querySelector('#hitokoto_text')
      hitokoto.href = `https://hitokoto.cn/?uuid=${data.uuid}`
      hitokoto.innerText = data.hitokoto
    })
    .catch(console.error)
export default {
  name: "LoginView",
  data(){
    return{
      form:{
        uname:'',
        password:''
      },
      checked:'',
      dialogFormVisible: false,
      userForm: {},
      formLabelWidth: '120px',
      centerDialogVisible: false,
      role:[],
    }
  },methods:{
    //注册
    connect() {
      // 替换为你的WebSocket URL
      const wsUrl = 'ws://localhost:8181/ws/'+Math.random().toFixed(36);
      this.ws = new WebSocket(wsUrl);

      this.ws.onopen = () => {
        this.connected = true;
        console.log('已连接到WebSocket服务器');
      };

      this.ws.onmessage = (event) => {
        this.messages.push(event.data);
        console.log('接收到的消息:', event.data);
      };

      this.ws.onclose = (event) => {
        this.connected = false;
        console.log('WebSocket已关闭', event);
      };

      this.ws.onerror = (error) => {
        console.error('WebSocket错误:', error);
      };
    },
    goRegister(){
      this.axios.post('user/user/register',this.userForm).then(res=>{
        if (res.data.code==200){
          this.$message.success(res.data.data);
          this.dialogFormVisible =false;
        }else {
          this.$message.error(res.data.msg);
        }
      })
    },
    //登录
    login(){
      this.axios.post('user/user/login',this.form).then(res=>{
        if (res.data.code==200){
          let token = res.data.data.token
          console.log(token)
          setToken(token,1)
          sessionStorage.setItem('uid',res.data.data.user.id);
          sessionStorage.setItem('uname',res.data.data.user.uname);
          sessionStorage.setItem('role',res.data.data.user.name);
          this.$router.push('/')
        }else {
          this.$message.error(res.data.msg);
        }
      })
    },
    //注册
    register(){
      this.dialogFormVisible = true;
    },

  },created() {

  },mounted() {

  },

}
</script>

<style scoped>

.footer{
  margin-top: -2px;
  color: rgb(255, 0, 119);
}
.loginbody {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("../assets/login4.png");

}

.login-page{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-title{
  font-size: 20px;
}

.box-card {
  width: 375px;
  background-color: rgba(255, 255, 255, 0.5);
}

.button-row {
  display: flex;
  justify-content: space-between;
}
</style>